import React, { useState,useRef } from 'react';

import './staginghome.css'
import Calendar from '../../components/Work/Calendar/calendar'
import { RightOutlined,LeftOutlined } from '@ant-design/icons';
import Workdata from '../../components/Work/Workdata/workdata'
import Distributedata from '../../components/Work/Distributedata/Distributedata'
import Workstab from '../../components/Work/WorksTab/workstab'
import Movepic from '../../components/Work/Movepic/movepic'
const staginghome: React.FC = () => {
  const [istopshow, setistopshow] = useState(false);
  const [activeTab, setActiveTab] = useState('作品数据');
    // 创建一个引用来获取容器元素
    const containerRef = useRef<HTMLDivElement>(null)
    // 定义滑动到右侧的函数
    const scorllRights = () => {
        console.log(222);
        if (containerRef.current) {           //每次滚动距离   平滑滚动
            containerRef.current.scrollBy({ left: 1500, behavior: 'smooth' })
        }
    }

    // 定义滑动到左侧的函数
    const scorllLefts = () => {
        console.log(111);

        if (containerRef.current) {
            containerRef.current.scrollBy({ left: -1500, behavior: 'smooth' })
        }
    }



  //  移入移出事件
  const onMouse = () => {
    setistopshow(true);
  }
  const offMouseLeave = () => {
    setistopshow(false)
  }

  const renderContont = () => {
    switch (activeTab) {
      case '作品数据':
        return <div><Workdata /></div>;

      case '分发数据':
        return <div><Distributedata /></div>;
      default:
        return null;
    }
  }

const list1=[
    '../../src/assets/img/j1.png',
    '../../src/assets/img/j1-2.png',
    '../../src/assets/img/j1-3.png',
    '../../src/assets/img/j1-4.png',
    '../../src/assets/img/j1-5.png',
    '../../src/assets/img/j1-6.png',
    '../../src/assets/img/j1-7.png',
    '../../src/assets/img/j1-8.png',
    '../../src/assets/img/j1-9.png',
    '../../src/assets/img/j1-10.png',
    '../../src/assets/img/j1-11.png',
]

  return (
    <div className='homebox'>
      <div className='head'>
        <div className='head_lt'>
          <img src="../../src/assets/img/hedlt.jpg" alt="" loading='lazy'/>
        </div>
        <div className='head_rt'>
          {/* 头部右侧上部 */}
          {/* 日历 */}
          <div className='rthed' onMouseEnter={onMouse} onMouseLeave={offMouseLeave}>
            {istopshow ? <Calendar /> : ''}

            <div className='rthed_lt'>
              <p className='phed'>
                <span>27/9</span>
                <span>2024</span>
              </p>
              <p className='pbom'>周五&ensp;农历&ensp;八月廿五</p>

            </div>
            <div className='rthed_rt'>
              <p className='dayp'>
                <span className='iconfont icon-rili'></span>
                &emsp;
                <span >世界旅游日</span>
              </p>
            </div>
          </div>

          {/* 头部右侧下面 */}
          <div className='rtbom'>
            <p>
              <span className='iconfont icon-lingdang'></span>
              <span style={{ color: 'blue' }}>【2024/9/20更新】喜迎国庆,大额立减券限时领</span>
            </p>
            <p>
              <span className='iconfont icon-lingdang'></span>
              <span>【一举两得】H5作品一键转视频,节日祝福传播更多样</span>
            </p>
          </div>

        </div>
      </div>


      {/* 我的数据 */}
      <div className='mydata'>
        <div className='mydata_hed'>

          <div className='mydata_hedlt'>
            <h1>我的数据</h1>
            <button onClick={() => setActiveTab('作品数据')}>作品数据</button>
            <button onClick={() => setActiveTab('分发数据')}>分发数据</button>
          </div>

          <div className='mydata_hedrt'>查看更多<RightOutlined /></div>

        </div>
        {/* tab内容部分  */}
        <div className='mydata_bom'>
          {renderContont()}
        </div>

      </div>


      {/* 作品 */}
      <div className='works'>
        <div className='works_hed'>
          <div className='hed_title'>作品</div>
          <div className='lookworks'>查看作品<RightOutlined /></div>
        </div>

        <div className='works_tabtitle'>
          <Workstab />
        </div>
      </div>



      {/* 精选模版 */}
      <div className='templatesbox'>
        {/* 头部标题 */}
        <div className='templatesbox_hed'>
          <div className='templatesbox_hedtitle'>精选模版</div>
          <div className='lookmany'>查看更多<RightOutlined /></div>
        </div>

        {/* 下面内容部分 */}
        <div className='templatesbox_body'>
          {/* 内衬盒 */}
          <div className='Internalbox' ref={containerRef}>
                    {/* 左箭头 */}
                <button onClick={scorllLefts} className='ltbtns'><LeftOutlined /></button>
                {/* 右箭头 */}
                <button onClick={scorllRights} className='rtbtns'><RightOutlined /></button>
            <div className='listson'>         
                <Movepic list={list1}/> 
            </div>

            <div className='listson'>
              <div className='listson_img'>
                <img src="../../src/assets/img/j2.png" alt="" loading='lazy'/>
              </div>

              <p>国庆节中国风节日宣传祝福111</p>
            </div>

            <div className='listsons'>
              <div className='listson_imgs'>
                <img src="../../src/assets/img/j3.png" alt="" loading='lazy'/>
              </div>

              <p>创意国庆狂欢购商场促销</p>
            </div>

            <div className='listsons'>
              <div className='listson_imgs'>
                <img src="../../src/assets/img/j4.png" alt="" loading='lazy'/>
              </div>

              <p>国庆节文艺汇演节目评选</p>
            </div>

            <div className='listson'>
              <div className='listson_img'>
                <img src="../../src/assets/img/j6.png" alt="" loading='lazy'/>
              </div>

              <p>数字人国庆促销宣传视频</p>
            </div>


            <div className='listson'>
              <div className='listson_img'>
                <img src="../../src/assets/img/j7.png" alt="" loading='lazy'/>
              </div>

              <p>线性风国庆节我爱我的国家</p>
            </div>

            <div className='listson'>
              <div className='listson_img'>
                <img src="../../src/assets/img/j8.png" alt="" loading='lazy'/>
              </div>

              <p>中国风国庆节团购手册活动的</p>
            </div>

            <div className='listson'>
              <div className='listson_img'>
                <img src="../../src/assets/img/j9.png" alt="" loading='lazy'/>
              </div>

              <p>国庆节餐厅川菜馆特价团购餐</p>
            </div>

            <div className='listson'>
              <div className='listson_img'>
                <img src="../../src/assets/img/j10.png" alt="" loading='lazy'/>
              </div>

              <p>简约喜嫁港风复古婚礼请</p>
            </div>

             <div className='listson'>
              <div className='listson_img'>
                <img src="../../src/assets/img/j11.png" alt="" loading='lazy'/>
              </div>

              <p>国庆节75周年建国知识测</p>
            </div>

              <div className='listson'>
              <div className='listson_img'>
                <img src="../../src/assets/img/j12.png" alt="" loading='lazy'/>
              </div>

              <p>简约商场超市百货国庆节</p>
            </div>

               <div className='listson'>
              <div className='listson_img'>
                <img src="../../src/assets/img/j13.png" alt="" loading='lazy'/>
              </div>

              <p>简约风物业管理物业服务</p>
            </div>

          </div>
        </div>
      </div>
    </div>
  )
}

export default staginghome
